<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>基于vue-router的案例</title>
    <style type="text/css">
        html,
        body,
        #app {
            margin: 0;
            padding: 0px;
            height: 100%;
        }

        .header {
            height: 50px;
            background-color: #545c64;
            line-height: 50px;
            text-align: center;
            font-size: 24px;
            color: #fff;
        }

        .footer {
            height: 40px;
            line-height: 40px;
            background-color: #888;
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
            color: #fff;
        }

        .main {
            display: flex;
            position: absolute;
            top: 50px;
            bottom: 40px;
            width: 100%;
        }

        .content {
            flex: 1;
            text-align: center;
            height: 100%;
        }

        .left {
            flex: 0 0 20%;
            background-color: #545c64;
        }

        .left a {
            color: white;
            text-decoration: none;
        }

        .right {
            margin: 5px;
        }

        .btns {
            width: 100%;
            height: 35px;
            line-height: 35px;
            background-color: #f5f5f5;
            text-align: left;
            padding-left: 10px;
            box-sizing: border-box;
        }

        button {
            height: 30px;
            background-color: #ecf5ff;
            border: 1px solid lightskyblue;
            font-size: 12px;
            padding: 0 20px;
        }

        .main-content {
            margin-top: 10px;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul li {
            height: 45px;
            line-height: 45px;
            background-color: #a0a0a0;
            color: #fff;
            cursor: pointer;
            border-bottom: 1px solid #fff;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        td,
        th {
            border: 1px solid #eee;
            line-height: 35px;
            font-size: 12px;
        }

        th {
            background-color: #ddd;
        }
    </style>
    <script src="../lib/vue_2.5.22.js"></script>
    <script src="../lib/vue-router_3.0.2.js"></script>
</head>
<body>


<!-- 案例分析步骤

    1.抽离并渲染APP根组件
    2.将左侧菜单改造为路由链接
    3.创建左侧菜单对应的路由组件
    4.在右侧主题区域添加路由占位符
    5.添加子路由规则
    6.通过路由重定向默认渲染用户组件
    7.渲染用户列表数据
    8.编程式导航跳转到用户详情页
    9.实现后退功能
 -->

<!-- 要被vue实例所控制的区域-->
<div id="app">
    <router-link to="/index"></router-link>


    <!-- 路由占位符 -->
    <router-view></router-view>
</div>


<script>

    // 定义app跟组件
    const App = {
        template: `<div>
            <header class="header">传智后台管理系统</header>

            <div class="main">

            <div class="content left">
            <ul>
                <li><router-link to="/users">用户管理</router-link></li>
                <li><router-link to="/roles">权限管理</router-link></li>
                <li><router-link to="/goods">商品管理</router-link></li>
                <li><router-link to="/orders">订单管理</router-link></li>
                <li><router-link to="/settings">系统管理</router-link></li>
            </ul>
            </div>

            <div class="content right">
                    <div class="main-content">
                        <router-view></router-view>
                    </div>
            </div>
            </div>

            <footer class="footer">版权信息</footer>
    </div>`
    }

    const Users = {
        data() {
            return {
                userList: [
                    {id: 1, name: '张三', age: 10},
                    {id: 2, name: '李四', age: 16},
                    {id: 3, name: '王五', age: 20},
                    {id: 4, name: '赵六', age: 30},
                ]
            }
        },
        methods: {
            goDetail(id) {
                console.log(id);
                // this.$router.push({path: '/userinfo', params: {id: this.id}})
                this.$router.push('/userinfo/' + id);
            }
        },
        template: `<div>
        <h3>用户管理区域

        <table>
        <thead>
         <tr>
           <th>编号</th>
           <th>姓名</th>
           <th>年龄</th>
           <th>操作</th>
         </tr>
         </thead>
         <tbody>
            <tr v-for="item in userList" :key="item.id">
               <td>{{item.id}}</td>
               <td>{{item.name}}</td>
               <td>{{item.age}}</td>
               <td><a href="javascript:;"  @click="goDetail(item.id)">详情</a></td>
            </tr>
        </tbody>
        </table>
        </h3>
      </div>`
    }

    const UserInfo = {
        props: ['id'],
        template: `<div>
            <h5>用户详情页 用户Id为: {{id}}</h5>

            <br>
            <button @click="goBack">返回上一步</button>
        </div>`,
        methods: {
            goBack() {
                this.$router.go(-1);
            }
        }
    }

    const Roles = {
        template: `<div>
        <h3>权限管理区域</h3>
      </div>`
    }

    const Goods = {
        template: `<div>
        <h3>商品管理区域</h3>
      </div>`
    }

    const Orders = {
        template: `<div>
        <h3>订单管理区域</h3>
      </div>`
    }

    const Settings = {
        template: `<div>
        <h3>系统管理区域</h3>
      </div>`
    }


    // 创建路由对象 [需要创建在vue对象的前面]
    const vueRouter = new VueRouter({
        routes: [
            {path: "/", redirect: '/index'},
            {
                path: "/index",
                redirect: "/users",
                component: App,
                children: [
                    {path: "/users", component: Users},
                    {path: "/userinfo/:id", component: UserInfo, props: true},
                    {path: "/roles", component: Roles},
                    {path: "/goods", component: Goods},
                    {path: "/orders", component: Orders},
                    {path: "/settings", component: Settings}
                ]
            }
        ]
    });

    let vue = new Vue({
        el: "#app",
        data: {},
        methods: {},
        router: vueRouter
    });


</script>
</body>


</html>
